<!DOCTYPE html>

<html lang="en-US">
<@common.header/>

<link rel="stylesheet" href="/static/assets/bootstrap3/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/static/assets/bootstrap-fileinput/css/fileinput.min.css" type="text/css">

<script type="text/javascript" charset="utf-8" src="/static/assets/js/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/assets/js/utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/assets/js/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<style>
  /* .hd {

        padding: 22px 30px;
        height: 90px;
        color: #fff;
        background-color: #101d37;
    }*/
</style>

<body class="page-sub-page page-submit" id="page-top">
<!-- Wrapper -->
<div class="wrapper">
    <!-- Navigation -->
    <@common.nav/><!-- /.navigation -->
    <!-- end Navigation -->
    <!-- Page Content -->
    <div id="page-content">
        <!-- Breadcrumb -->
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li class="active">添加你的房产</li>
            </ol>
        </div>
        <div class="container">
            <header style="text-align: center;">
                <h1 style="font-weight: 700;color: #101d37;font-size: 33px;">发布出售房源</h1>
                <h3 style="font-size: 20px;">数万线下门店 · 快速全城推广 · 专业经纪人服务</h3>
            </header>
            <form  id="form-submit" class="form-horizontal" method="post" enctype="multipart/form-data"  action="/house/add" role="from" style="font-size: 18px;font-weight: 600px;">


                <input type="text" name="state" value="3" hidden>
                <input type="text" name="type" value="1" hidden>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">小区所在城市</label>
                        <div class="col-sm-5">
                            <select name="cityId" id="submit-location">
                                <option value="0">选择城市</option>
                                <#list citys as city >
                                    <option value="${city.id}">${city.cityName}</option>
                                </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">小区名</label>
                        <div class="col-sm-5">
                            <select name="communityId" id="submit-location">
                                <option value="0">选择小区</option>
                                <#list communitys as community >
                                    <option value="${community.id}">${community.name}</option>
                                </#list>
                            </select>
                        </div>

                    </div>




                <div class="form-group">
                    <label class="col-sm-2 control-label">详细地址</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="address-map" name="address">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="submit-title" name="name" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">期望售价</label>
                    <div class="col-sm-3">


                        <div class="input-group">
                            <input type="text" class="form-control" id="submit-price" name="price" pattern="\d*" required />
                            <span class="input-group-addon">万</span>
                        </div>
                    </div>
                    <div>
                        <a href="https://bj.ke.com/yezhu/gujia/?channel_id=2023" target="_blank" class="link-gujia">不太清楚如何定价? 先估个价</a>
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">面积</label>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="submit-price" name="price" pattern="\d*" required />
                            <span class="input-group-addon">m<sup>2</sup></span>

                        </div>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">房间布局</label>
                    <div class="col-sm-2">
                        卧室<div class="input-group">
                        <input type="text" class="form-control" id="submit-Beds" name="beds" pattern="\d*" required>
                            <span class="input-group-addon">间</span>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        卫生间
                        <div class="input-group">
                            <input type="text" class="form-control" id="submit-Baths" name="baths" pattern="\d*" required>
                            <span class="input-group-addon">间</span>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        客厅:
                        <div class="input-group">
                            <input type="text" class="form-control"  pattern="\d*" required />
                            <span class="input-group-addon">间</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">房屋图</label>
                    <div class="col-sm-7">
                        <input  id="bookCover_view"  type="file" name="houseFiles" class="file-loading"    multiple  placeholder="请选择资源"  />

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">户型图</label>
                    <div class="col-sm-7">
                        <input  id="bookCover_view2"  type="file" name="floorPlanFiles" class="file-loading"    multiple  placeholder="请选择资源"  />

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">特点：</label>
                    <div class="col-sm-7">
                        <label class="checkbox-inline">
                            <input name="featureList" value="满五年" type="checkbox">满五年
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="南北通透" type="checkbox">南北通透
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="采光好" type="checkbox">采光好
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="高楼层" type="checkbox">高楼层
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="环境好" type="checkbox">环境好

                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="价格合理" type="checkbox">价格合理

                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="楼龄新" type="checkbox">楼龄新

                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="税少" type="checkbox">税少

                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="带阳台" type="checkbox">带阳台
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="得房率高" type="checkbox">得房率高
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="临地铁" type="checkbox">临地铁
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="学区房" type="checkbox">学区房
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="户型好" type="checkbox">户型好
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="没有遮挡" type="checkbox">没有遮挡
                        </label>
                        <label class="checkbox-inline">

                            <input name="featureList" value="次顶层"   type="checkbox">次顶层
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="落地窗"   type="checkbox">落地窗
                        </label>
                        <label class="checkbox-inline">
                            <input name="featureList" value="精装修"   type="checkbox">精装修
                        </label>


                    </div>
                </div>



                <div class="form-group">
                    <label class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-7">
                        <button type="submit"  class="btn btn-default large"  style="position: relative;bottom: -500px;right: -200px;">提交委托</button>
                        <script id="container" type="text/plain" style="height:300px;padding: 0px;" />
                    </div>

                </div>

                <div class="form-group">

                </div>
            </form><!-- /#form-submit -->
        </div><!-- /.container -->
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyABT1kCnk8CW4Ckpd0RisUg25PIdDD3Gfg"></script>

<#--<@common.js/>-->
    <script type="text/javascript" src="/static/assets/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/static/assets/bootstrap3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/assets/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script type="text/javascript" src="/static/assets/bootstrap-fileinput/js/locales/zh.js"></script>
<!--[if gt IE 8]>

<script type="text/javascript" src="/static/assets/js/ie.js"></script>


<![endif]-->

 <script  type="text/javascript" >


     //初始化fileinput控件（第一次初始化）
     function initFileInput(ctrlName, url) {
         var control = $('#' + ctrlName);
         control.fileinput({
             uploadAsync:false,
             language: 'zh', //设置语言
             textEncoding:"UTF-8",
             uploadUrl: url, //上传的地址
             enctype : 'multipart/form-data',
             allowedFileExtensions : ['jpg','png',"gif"],//接收的文件后缀
             showUpload: true, //是否显示上传按钮
             showCaption: true,//是否显示标题
             browseClass: "btn btn-primary",
             maxFileCount: 50,//最大上传文件数限制
             autoReplace:true,//自动替换已选择的文件
             dropZoneEnabled: true,//是否显示拖拽区
             dropZoneTitle:"选择展示图片",
             previewSettings: {
                 image: {width: "200px", height: "150px"},
             },
             layoutTemplates :{
                 // actionDelete:'', //去除上传预览的缩略图中的删除图标
                 actionUpload:'',//去除上传预览缩略图中的上传图片；
                 actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
             }
         }).on("filebatchuploadsuccess", function(event, data1) {//当上传成功回调函数

         });
     }



     $(document).ready(function() {
         //initFileInput()
         initFileInput("bookCover_view","/te");
         initFileInput("bookCover_view2","/te");
         var ue = UE.getEditor('container');
          var errorMsg   = "${errorMsg!""}";
          var successMsg = "${successMsg!""}";
          if(errorMsg){
              errormsg("error",errorMsg);
          }
          if(successMsg) {
              successmsg("success",successMsg);
          }


        })




    var _latitude  = 39.99;
    var _longitude = 116.46;

    function initSubmitMap(_latitude,_longitude){
        var mapCenter = new google.maps.LatLng(_latitude,_longitude);
        var mapOptions = {
            zoom: 15,
            center: mapCenter,
            disableDefaultUI: false,
            //scrollwheel: false,
            styles: mapStyles
        };
        var mapElement = document.getElementById('submit-map');
        var map = new google.maps.Map(mapElement, mapOptions);
        var marker = new MarkerWithLabel({
            position: mapCenter,
            map: map,
            icon: '/static/assets/img/marker.png',
            labelAnchor: new google.maps.Point(50, 0),
            draggable: true
        });
        $('#submit-map').removeClass('fade-map');
        google.maps.event.addListener(marker, "mouseup", function (event) {
            var latitude = this.position.lat();
            var longitude = this.position.lng();
            $('#latitude').val( this.position.lat() );
            $('#longitude').val( this.position.lng() );
        });

//      Autocomplete
        // var input = /** @type {HTMLInputElement} */( document.getElementById('address-map') );
        // var autocomplete = new google.maps.places.Autocomplete(input);
        // autocomplete.bindTo('bounds', map);
        // google.maps.event.addListener(autocomplete, 'place_changed', function() {
        //     var place = autocomplete.getPlace();
        //     if (!place.geometry) {
        //         return;
        //     }
        //     if (place.geometry.viewport) {
        //         map.fitBounds(place.geometry.viewport);
        //     } else {
        //         map.setCenter(place.geometry.location);
        //         map.setZoom(17);
        //     }
        //     marker.setPosition(place.geometry.location);
        //     marker.setVisible(true);
        //     $('#latitude').val( marker.getPosition().lat() );
        //     $('#longitude').val( marker.getPosition().lng() );
        //     var address = '';
        //     if (place.address_components) {
        //         address = [
        //             (place.address_components[0] && place.address_components[0].short_name || ''),
        //             (place.address_components[1] && place.address_components[1].short_name || ''),
        //             (place.address_components[2] && place.address_components[2].short_name || '')
        //         ].join(' ');
        //     }
        // });

    }

    function success(position) {
        initSubmitMap(position.coords.latitude, position.coords.longitude);
        $('#latitude').val( position.coords.latitude );
        $('#longitude').val( position.coords.longitude );
    }

    $('.geo-location').on("click", function() {
        if (navigator.geolocation) {
            $('#submit-map').addClass('fade-map');
            navigator.geolocation.getCurrentPosition(success);
        } else {
            error('Geo Location is not supported');
        }
    });



</script>

</body>
</html>